<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>聊天室</title>
		<link rel="stylesheet" href="../public/css/bootstrap.css">
		<link rel="stylesheet" href="../public/css/chat.css">
	</head>
	<body>
		<div class="text-center">
			<div class="panel panel-default col-xs-12 col-sm-8 col-sm-offset-1">
				<audio id="music" src="" autoplay=""></audio>
				<h3 class="panel-heading panel-title">欢迎<span><%= user %></span>来到聊天室</h3>
				<span class="glyphicon glyphicon-off"></span>
				<span class="glyphicon glyphicon-music rotate"></span>
				<ul id="msg" class="list-group">
				</ul>
				<div class="panel-footer input-group">
					<input type="text" class="form-control" placeholder="Message...">
					<span class="input-group-btn">
						<button class="btn btn-success" type="button">发送</button>
					</span>
				</div>
			</div>
			<div class="panel panel-default hidden-xs col-sm-2">
				<h3 class="panel-heading panel-title">在线列表</h3>
				<ul id="list" class="list-group">
				</ul>
			</div>
		</div>
		<script src="../public/js/jquery.js"></script>
		<!-- 引入框架 -->
		<script src="socket.io/socket.io.js"></script>
		<script>
			let user = "<%= user %>";
			let token = "<%= token %>";
			let list = [];
			$(".glyphicon").css("animationPlayState", music.paused ? "paused" : "running");
			$("ul").css("height", $(window).height() - parseInt($(".panel-heading").css("height")) - parseInt($(".panel-footer")
				.css("height")) - 5)
			var socket = io();
			socket.emit('new', {
				user: user,
				token: token
			});
			$('input').keydown(function(e) {
				if(e.keyCode == 13){
					// 发送数据
					socket.emit('chat', {
						msg: $('input').val(),
						user: user,
						token: token
					});
					$('input').val("")
				}
			})
			$('button').click(function() {
				// 发送数据
				socket.emit('chat', {
					msg: $('input').val(),
					user: user,
					token: token
				});
					$('input').val("")
			})
			// 接收提示信息
			socket.on('info', (info) => {
				console.log("info", info);
				add_info(info.msg);
				if (info.code == -8) {
					socket.close();
					location.href = 'http://<%= url %>/'
				}
			});
			// 接收在线列表
			socket.on('list', (info) => {
				console.log("list", info);
				list = info.list;
				$("#list").prev().html(`在线列表[${list.length}]`);
				$("#list").html("");
				for (let i = 0, l = list.length; i < l; i++) {
					var tag = $(`<li class="list-group-item">${list[i]}</li>`);
					if (user == list[i]) {
						tag.html(`${list[i]}(我)`)
					}
					$('#list').append(tag);
				}
				// scrollTop设置滚动坐标  height获取标签的高度  
				$('div').scrollTop($('#list').height());
				music.src = "../public/media/0001.mp3";
			})
			// 接收进入房间
			socket.on('join', (info) => {
				console.log("join", info);
				list.push(info.name);
				$("#list").prev().html(`在线列表[${list.length}]`);
				$('#list').append(`<li class="list-group-item">${info.name}</li>`);
				add_info(`<span class="text-primary">${info.name}</span><span class="text-success">加入了房间</span>`);
			})
			// 接收退出房间
			socket.on('exit', (info) => {
				console.log("exit", info);
				if (info.name != user) {
					let index = list.findIndex(function(item) {
						return item == info.name;
					});
					if (index != -1) {
						list.splice(index, 1);
						$($("#list>li")[index]).remove();
						$("#list").prev().html(`在线列表[${list.length}]`);
						add_info(`<span class="text-primary">${info.name}</span><span class="text-danger">退出了房间</span>`);
					}
				}
			})
			// 接收数据
			socket.on('chat', (info) => {
				console.log("chat", info);
				let text = info.name == user ? "right" : "left";
				$("#msg").append(
					`<li class="list-group-item text-${text}">
						<span class="label label-default">${info.name}</span>
						<div class="panel panel-default">${info.msg}</div>
					</li>`
				);
				// scrollTop设置滚动坐标  height获取标签的高度  
				$('#msg').scrollTop($('#msg')[0].scrollHeight)
			})
			// 监听断开
			socket.on('disconnect', () => {
				location.href = 'http://<%= url %>/'
			})
			//音乐播放结束
			music.onended = function() {
				if (music.src == "../public/media/0001.mp3") {
					music.src = "../public/media/0002.mp3";
				} else {
					music.src = "../public/media/0001.mp3";
				}
			}
			music.onplaying = function() {
				$(".glyphicon").css("animationPlayState", music.paused ? "paused" : "running");
			}
			music.onpause = function() {
				$(".glyphicon").css("animationPlayState", music.paused ? "paused" : "running");
			}
			//暂停/播放音乐
			$(".glyphicon-music").click(function() {
				if (music.paused) {
					music.play();
				} else {
					music.pause();
				}

			})
			//退出房间
			$(".glyphicon-off").click(function() {
				$.ajax({
					url: 'http://<%= url %>/<%= ajax %>',
					method: 'get',
					success: function(res) {
						alert('退出成功，即将跳转');
						// 跳转到首页
						// location.href实现页面跳转
						location.href = 'http://<%= url %>/'
					}
				})
			})
			//添加提示信息
			function add_info(msg) {
				$('#msg').append(`<li class="list-group-item"><span class="label label-success">${msg}</span></li>`);
				// scrollTop设置滚动坐标  height获取标签的高度  
				$('#msg').scrollTop($('#msg')[0].scrollHeight)
			}
		</script>
	</body>
</html>
